<script>
    import iconMap from './iconMap.js'
    var hasChild = function (context) {
        return context.children && context.children.length
    }
    var getRectChildren = function (context, defaultText) {
        return hasChild(context) ? context.children : defaultText
    }
    const noop = function () {}
    export default {
        name: 'zButton',
        props: {
            type: String,           // 按钮类型
            shape: String,          // 按钮形状，如rect、icon、font
            disabled: Boolean,      // 是否可操作
            loading: Boolean,       // 是否显示加载图标
            title: {                // 字体按钮后面是否跟文字标题
                type: String,
                default: ''
            }
        },
        render: function (h, context) {
            var props = context.props
            var classes = context.data.staticClass || ''
            var style = context.data.staticStyle || ''
            var clickHandler = context.listeners['click'] || noop
            var nativeClickHandler = context.data.nativeOn && context.data.nativeOn['click'] || noop
            // 长方形确定取消按钮
            if (props.type === 'ensure' && props.shape === 'rect') {
                var ensureChildren = getRectChildren(context, '确定')
                return (
                    <i-button
                        type="primary"
                        class={classes}
                        style={style}
                        disabled={props.disabled}
                        loading={props.loading}
                        on-click={clickHandler}
                        nativeOn-click={nativeClickHandler}>
                        {ensureChildren}
                    </i-button>
                )
            }
            if (props.type === 'cancel' && props.shape === 'rect') {
                var cancelChidren = getRectChildren(context, '取消')
                return (
                    <i-button
                        type="warning"
                        class={classes}
                        style={style}
                        disabled={props.disabled}
                        loading={props.loading}
                        on-click={clickHandler}
                        nativeOn-click={nativeClickHandler}>
                        {cancelChidren}
                    </i-button>
                )
            }

            // 图标确定取消按钮
            if (props.type === 'ensure' && props.shape === 'icon') {
                var _classes = 'ivu-btn-icon ' + classes
                return (
                    <i-button
                        type="primary"
                        shape="circle"
                        icon="android-done"
                        size="small"
                        class={_classes}
                        style={style}
                        disabled={props.disabled}
                        loading={props.loading}
                        on-click={clickHandler}
                        nativeOn-click={nativeClickHandler}>
                        确定
                    </i-button>
                )
            }
            if (props.type === 'cancel' && props.shape === 'icon') {
                var _classes = 'ivu-btn-icon ' + classes
                return (
                    <i-button
                        type="warning"
                        shape="circle"
                        icon="android-close"
                        size="small"
                        class={_classes}
                        style={style}
                        disabled={props.disabled}
                        loading={props.loading}
                        on-click={clickHandler}
                        nativeOn-click={nativeClickHandler}>
                        取消
                    </i-button>
                )
            }

            // 图标添加删除按钮
            if (props.type === 'add' && props.shape === 'icon') {
                var _classes = 'ivu-btn-icon ' + classes
                return (
                    <i-button
                        type="primary"
                        shape="circle"
                        icon="android-add"
                        size="small"
                        class={_classes}
                        style={style}
                        disabled={props.disabled}
                        loading={props.loading}
                        on-click={clickHandler}
                        nativeOn-click={nativeClickHandler}>
                        添加
                    </i-button>
                )
            }
            if (props.type === 'remove' && props.shape === 'icon') {
                var _classes = 'ivu-btn-icon ' + classes
                return (
                    <i-button
                        type="warning"
                        shape="circle"
                        icon="android-remove"
                        size="small"
                        class={_classes}
                        style={style}
                        disabled={props.disabled}
                        loading={props.loading}
                        on-click={clickHandler}
                        nativeOn-click={nativeClickHandler}>
                        删除
                    </i-button>
                )
            }

            // 字体按钮
            if (props.shape === 'font') {
                var _classes = 'iconfont icon-' + props.type + ' ' + classes
                return (
                    <a href="javascript:;" on-click={clickHandler} nativeOn-click={nativeClickHandler}>
                        <i class={_classes} style={style} title={iconMap[props.type]}></i>
                        <span style="padding-left: 5px">{props.title}</span>
                    </a>
                )
            }
        },
        functional: true
    }
</script>
